<mat-toolbar class="title"
  color="primary">
  <div>{{'LINK.settings' | translate}}</div>
  <button mat-icon-button
    (click)="onNoClick()">
    <mat-icon>close</mat-icon>
  </button>
</mat-toolbar>
<div mat-dialog-content>
  <mat-form-field [ngStyle]="{'width.px':502}">
    <mat-label>{{'LINK.title' | translate}}</mat-label>
    <input matInput
      [(ngModel)]="data.title">
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field [ngStyle]="{'margin-right.px': 10, 'width.px':246}">
    <mat-label>{{'alertSetting.requestType' | translate}}</mat-label>
    <mat-select [(value)]="data.requestType">
      <mat-option *ngFor="let requestType of arrayRequestType"
        [value]="requestType"
        (click)="onChange(); changeRequestType()">
        {{requestType}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field [ngStyle]="{'width.px':246}">
    <mat-label>{{'alertSetting.comparisonLogic' | translate}}</mat-label>
    <mat-select [(value)]="data.comparsionLogic">
      <mat-option *ngFor="let comparsionLogic of arrayComparsionLogic"
        [value]="comparsionLogic"
        (click)="onChange()">
        {{comparsionLogic}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field *ngIf="data.requestType==='POST'"
    [ngStyle]="{'width.px':502}">
    <mat-label>{{'alertSetting.postRequestJSON'| translate}}</mat-label>
    <textarea matInput
      [(ngModel)]="data.postData"></textarea>
  </mat-form-field>
</div>
<div mat-dialog-content>
  <mat-form-field [ngStyle]="{'margin-right.px': 10, 'width.px':226}">
    <mat-label>{{'alertSetting.alertMessing'| translate}}</mat-label>
    <input matInput
      [(ngModel)]="data.alertMessage">
  </mat-form-field>
  <mat-form-field [ngStyle]="{'width.px':226}">
    <mat-label>{{'alertSetting.alertURL' | translate }}</mat-label>
    <input matInput
      [(ngModel)]="data.alertUrl">
  </mat-form-field>
  <button matTooltip="{{'alertSetting.addParam' | translate }}"
    mat-icon-button
    (click)="addParams()">
    <mat-icon>add</mat-icon>
  </button>
</div>

<span>
  <div mat-dialog-content
    *ngFor="let value of data.keyList; let i = index; trackBy: trackByFn">

    <mat-form-field *ngIf="data.requestType==='POST'"
      [ngStyle]="{'margin-right.px': 10, 'width.px':201}">
      <mat-label>{{'alertSetting.key' | translate}}</mat-label>
      <input matInput
        [(ngModel)]="data.keyList[i]">
    </mat-form-field>
    <mat-form-field matTooltip="{{'alertSetting.comparisonOperator' | translate}}"
      style="width: 40px; margin-right: 10px;">
      <mat-select [(ngModel)]="data.comparsionTypeList[i]">
        <mat-option *ngFor="let type of comparsionTypeList | keyvalue"
          [value]="type.value">
          {{type.key}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field [ngStyle]="{'width.px':data.requestType==='POST' ? 201 : 412}">
      <mat-label>{{'alertSetting.expected' | translate}}</mat-label>
      <input matInput
        [(ngModel)]="data.expectedList[i]">
    </mat-form-field>

    <button matTooltip="{{'alertSetting.deleteParams'|translate}}"
      mat-icon-button
      (click)="deleteParams(i)">
      <mat-icon>close</mat-icon>
    </button>
  </div>
</span>

<div class="color-picker">
  <div class="summary-info"
    (click)="toggleColors(0)">
    <div class="info">
      <p class="style">{{'alertSetting.successColor' | translate}}</p>
      <p class="style-value">{{ data.alertSuccessColor }}</p>
    </div>

    <div class="circle"
      [ngStyle]="{'background': data.alertSuccessColor}">

    </div>
  </div>

  <div *ngIf="show[0]"
    class="opened">
    <div class="colors">
      <color-circle width="120"
        circleSize="20"
        circleSpacing="10"
        [colors]="this.colorsSuccess | async"
        [color]=data.alertSuccessColor
        (onChange)="changeColorManual($event?.['color'].hex, 'success')"></color-circle>
    </div>

    <div class="hex-code">
      <p>{{'alertSetting.customColor' | translate}}</p>
      <div class="circle"
        (click)='togglePicker(0)'
        [ngStyle]="{'background': data.alertSuccessColor}">
        <div *ngIf="showPicker[0]"
          class="color-chrome">
          <div class="pickerOverlay"
            (click)='togglePicker(0); $event.stopPropagation()'></div>
          <color-chrome [disableAlpha]="true"
            [color]=data.alertSuccessColor
            (onChange)='changeColorManual($event.color.hex, "success")'
            (click)="$event.stopPropagation()"></color-chrome>
        </div>
      </div>
      <button matTooltip="{{'alertSetting.addToPalette' | translate}}"
        mat-icon-button
        (click)="addToPalette('success')">
        <mat-icon>add</mat-icon>
      </button>
    </div>
  </div>
</div>
<div class="color-picker">
  <div class="summary-info"
    (click)="toggleColors(1)">
    <div class="info">
      <p class="style">{{'alertSetting.failColor' | translate}}</p>
      <p class="style-value">{{ data.alertFailColor }}</p>
    </div>

    <div class="circle"
      [ngStyle]="{'background': data.alertFailColor }">

    </div>
  </div>

  <div *ngIf="show[1]"
    class="opened">
    <div class="colors">
      <color-circle width="120"
        circleSize="20"
        circleSpacing="10"
        [colors]='this.colorsFail | async'
        [color]=data.alertFailColor
        (onChangeComplete)="changeColorManual($event?.['color']?.hex, 'fail')"></color-circle>
    </div>

    <div class="hex-code">
      <p>{{'alertSetting.customColor' | translate}}</p>
      <div class="circle"
        (click)='togglePicker(1)'
        [ngStyle]="{'background': data.alertFailColor}">
        <div *ngIf="showPicker[1]"
          class="color-chrome">
          <div class="pickerOverlay"
            (click)='togglePicker(1); $event.stopPropagation()'></div>
          <color-chrome [disableAlpha]="true"
            [color]=data.alertFailColor
            (onChange)='changeColorManual($event.color.hex, "fail")'
            (click)="$event.stopPropagation()"></color-chrome>
        </div>
      </div>
      <button matTooltip="{{'alertSetting.addToPalette' | translate}}"
        mat-icon-button
        (click)="addToPalette('fail')">
        <mat-icon>add</mat-icon>
      </button>
    </div>
  </div>
</div>
<div class="color-picker">
  <div class="summary-info"
    (click)="toggleColors(2)"
    [ngStyle]="{'margin-right.px': 0}">
    <div class="info">
      <p class="style">{{'alertSetting.textColor' | translate}}</p>
      <p class="style-value">{{ data.alertTextColor }}</p>
    </div>

    <div class="circle"
      [ngStyle]="{'background': data.alertTextColor }">

    </div>
  </div>

  <div *ngIf="show[2]"
    class="opened">
    <div class="colors">
      <color-circle width="120"
        circleSize="20"
        circleSpacing="10"
        [colors]='this.colorsText | async'
        [color]="data.alertTextColor"
        (onChangeComplete)="changeColorManual($event?.['color']?.hex, 'text')"></color-circle>
    </div>

    <div class="hex-code">
      <p>{{'alertSetting.customColor' | translate}}</p>
      <div class="circle"
        (click)='togglePicker(2)'
        [ngStyle]="{'background': data.alertTextColor}">
        <div *ngIf="showPicker[2]"
          class="color-chrome">
          <div class="pickerOverlay"
            (click)='togglePicker(2); $event.stopPropagation()'></div>
          <!-- <color-chrome disableAlpha="true"
            [color]="data.alertTextColor"
            (onChange)=`changeColorManual($event.color.hex, "text")` (click)="$event.stopPropagation()">
          </color-chrome> -->

        </div>
      </div>
      <button matTooltip="{{'alertSetting.addToPalette' | translate}}"
        mat-icon-button
        (click)="addToPalette('text')"
        [ngStyle]="{'width.px':30}">
        <mat-icon>add</mat-icon>
      </button>
    </div>
  </div>
</div>


<div mat-dialog-content>
  <mat-form-field [ngStyle]="{'margin-right.px': 10, 'width.px':226}">
    <mat-label>{{'alertSetting.alertPopupDuration' | translate}}</mat-label>
    <input matInput
      [(ngModel)]="data.alertDuration">
  </mat-form-field>
  <mat-form-field [ngStyle]="{'width.px':226}">
    <mat-label>{{ 'alertSetting.audioURL' | translate }}</mat-label>
    <input matInput
      [(ngModel)]="data.audioUrl">
  </mat-form-field>
  <button matTooltip="{{'alertSetting.testAudio' | translate}}"
    mat-icon-button
    (click)="testAudio()"
    color="primary">
    <mat-icon>play_circle_filled</mat-icon>
  </button>
</div>
<div mat-dialog-content>
  <mat-checkbox color="primary"
    [(ngModel)]="data.showResponse"
    labelPosition="before"
    (click)="onChange()">{{'alertSetting.showResponse' | translate}}</mat-checkbox>
</div>
<div mat-dialog-actions
  style="float: right; margin-bottom: 0rem;">
  <button mat-raised-button
    (click)="onNoClick()">{{'LINK.buttons.cancel' | translate}}</button>
  <button mat-raised-button
    class="setting-btn-ok"
    [mat-dialog-close]="data"
    cdkFocusInitial>{{'LINK.buttons.save' | translate}}</button>
</div>
